<template>
  <div class="recordDetail">
    <NavBar
      :title="$route.meta.title"
      left-arrow
      :border="false"
      @click-left="$router.back()"
      class="nav-bar">
    </NavBar>
    <div class="content">
      <DropdownMenu>
        <DropdownItem
          v-model="value1"
          @change="handleChangeValue1"
          :options="option1" />
        <DropdownItem
          v-model="value2"
          :options="option2"
          @change="handleChangeValue2" />
        <DropdownItem
          v-model="value3"
          :options="option3"
          @change="handleChangeValue3"
          :disabled="value2 == 1" />
      </DropdownMenu>
      <div style="height: 4px"></div>
      <div v-autoHeight>
        <!-- <HPDFViewer :path="pdfUrl" /> -->
			<HPDFViewer v-if="showPdf" :path="pdfUrl"></HPDFViewer>
			<img v-else class="pdf-img" :src="pdfUrl" />
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { GetEquipmentFileSelect, GetRecordCorrelationFiles, PreviewElectronicRecordReport, PreviewRecordCorrelationFile, PreviewUnionElectronicRecordReport } from '@/api/recordQuery';
import HPDFViewer from '@/components/HPDFViewer';
import { Button, DropdownItem, DropdownMenu, Empty, NavBar } from 'vant';
export default {
  name: 'recordDetail',
  components: { Empty,NavBar ,Button,DropdownMenu, DropdownItem,HPDFViewer},
  data() {
    return {
			showPdf: false,
      token:'',
      pdfUrl: '',
      queryParams: {},
      value1: '',
      value2: '1',
      value3: '',
      option1: [
        { text: '记录名称(全部)', value: '' },
      ],
      option2: [
        { text: '电子记录报告', value: '1' },
        { text: '仪器检验报告', value: '2' },
        { text: '附件查看', value: '3' },
      ],
      option3: [
        { text: '选择pdf', value: '' },
      ],
      deviceReportList:[],
      deviceReportList:[],
    };
  },
  methods: {
    async getPreviewUrl(params) {
      try {
        const data = await PreviewUnionElectronicRecordReport(params);
      if (data.ErrorCode == 0) {
        this.defaultUrl = data.Result.path||'';
        // this.pdfUrl = data.Result.path||'';
				// let path = result.Result.targetPath;
				this.setFile(data.Result.path);
      }
      } catch (error) {
        this.queryParams.children.forEach(e=>{
          this.getPreviewSonUrl({Token:this.token,recordCode:e.recordCode,testID:e.testID},true)
        })
      }

    },
    async getPreviewSonUrl(params,type) {
      const data = await PreviewElectronicRecordReport(params);
      if (data.ErrorCode == 0) {
        // this.pdfUrl = data.Result.path||'';
				this.setFile(data.Result.path);
        if(type)this.defaultUrl = data.Result.path||'';
      }
    },
    async getPdfUrl(params) {
      const data = await PreviewRecordCorrelationFile(params);
      if (data.ErrorCode == 0) {
        // this.pdfUrl = data.Result.targetPath||'';
				this.setFile(data.Result.targetPath);
      }
    },
		setFile(path){
				if(path){
					let type = path.substring(path.lastIndexOf('.')+1) ;
					console.log('type',this.pdfUrl)
					if(type=='pdf'){
						this.pdfUrl = path;
						this.showPdf = true;
					}else{
						let domain = localStorage.getItem('domain');
						this.pdfUrl = domain +  path;
						this.showPdf = false;
					}
					console.log('state.path', this.pdfUrl);
					// alert('渲染pdf地址：'+ JSON.stringify(state.path));
				}else{
					this.pdfUrl = '';
				}
		},
    handleChangeValue1(value){
      this.pdfUrl =''
      this.value2 = '1'
      this.value3 = ''
      if(!value){
				this.getFileList({Token:this.token,batchID:this.queryParams.batchID,materialCode:this.queryParams.materialCode,testID:this.queryParams.testID})
				return this.pdfUrl = this.defaultUrl
			} 

      let obj =this.queryParams.children.find(e=>e.recordCode===value)
      this.getPreviewSonUrl({Token:this.token,recordCode:obj.recordCode,testID:obj.testID})
    	this.getFileList({Token:this.token,batchID:this.queryParams.batchID,materialCode:this.queryParams.materialCode,testID:this.queryParams.testID,recordCode: obj.recordCode})
    },
    handleChangeValue2(value){
      this.value3 = ''
      if(value==1) return this.pdfUrl = this.defaultUrl
      if(value==2) this.option3 = this.deviceReportList
      if(value==3) this.option3 = this.fileList
      if(this.option3.length){
        this.value3 = this.option3[0].value
        this.getPdfUrl({Token:this.token,iautoid:this.value3})
      }else{
        this.pdfUrl = ''
      }
    },
    handleChangeValue3(value){
      this.getPdfUrl({Token:this.token,iautoid:value})
    },

    async getDeviceReportList(params) {
      const data = await GetEquipmentFileSelect(params);
      if (data.ErrorCode == 0) {
        data.Result.forEach(e=>{
          e.text=e.FileName
          e.value=e.iautoid
        })
        this.deviceReportList = data.Result||[];
        if(this.deviceReportList.length){
          this.value3 = this.deviceReportList[0].iautoid
          this.getPdfUrl({Token:this.token,iautoid:this.value3})
        }
      }
    },
    async getFileList(params) {
      const data = await GetRecordCorrelationFiles(params);
      if (data.ErrorCode == 0) {
        data.Result.forEach(e=>{
          e.text=e.FileName
          e.value=e.iautoid
        })
        this.fileList = data.Result||[];
        // if(this.fileList.length){
        //   this.value3 = this.fileList[0].iautoid
        //   this.getPdfUrl({Token:this.token,iautoid:this.value3})
        // }
      }
    },
  },
  mounted() {
    this.token = localStorage.getItem('tokenKey');
    this.queryParams = this.$route.query.param?JSON.parse(this.$route.query.param):{};
    console.log('this.queryParams',this.queryParams)
    this.getPreviewUrl({Token:this.token,recordCode:this.queryParams.recordCode,testID:this.queryParams.testID})
    const RecordCodeList = this.queryParams.children.map(e=>e.recordCode)||[]
    this.getDeviceReportList({Token:this.token,type:"RecordEquipmentPDF",batchID:this.queryParams.batchID,materialCode:'',recordCode:'',RecordCodeList})
    this.getFileList({Token:this.token,batchID:this.queryParams.batchID,materialCode:this.queryParams.materialCode,testID:this.queryParams.testID,})
    if(this.queryParams.children&&this.queryParams.children.length){
      let options = this.queryParams.children.map(e=>({text:e.name,value:e.recordCode}))
      this.option1 = this.option1.concat(options)
    }
  },
  created() {
  }
};
</script>
<style scoped lang="less">
.icon {
  font-size: var(--vt-ft-xxl);
}
	.pdf-img{
		max-width: 100vw;
	}
</style>
